0 // 入口函数
$(function () {
  // 文章分类的获取，和文章详细信息的获取都是异步操作，必须保证文章分类先渲染完成，然后才能渲染文章信息！
  function initForm () {
    let id = location.href.split('=')[1]

    // 发送ajax
    axios({
      method: 'get',
      url: '/my/article/' + id
    }).then(res => {
      //成功回调
      // console.log(res)

      if (res.data.status != 0) {
        return layer.msg(res.data.message)
      }
      // 成功过后渲染 - form表单赋值
      layui.form.val('formEdit', res.data.data) // 把文章信息，赋值给form表单;

      // 文章内容和文章封面都是插件，赋值需要特殊处理;
      setTimeout(function () {
        tinyMCE.activeEditor.setContent(res.data.data.content)
      }, 1000)

      // 修改文章封面
      // 3. 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：
      let baseURL = 'http://api-breakingnews-web.itheima.net'
      let url = baseURL + res.data.data.cover_img
      if (res.data.data.cover_img) {
        $image
          .cropper('destroy') // 销毁旧的裁剪区域
          .attr('src', url) // 重新设置图片路径
          .cropper(options) // 重新初始化裁剪区域
      }
    })
  }
  // 1. 初始化文章分类 - 封装成函数

  //   1.1 调用函数 - 渲染表单
  initArtCateList() //函数不调用不执行

  function initArtCateList () {
    // 1.1.2 发起ajax
    axios({
      method: 'get',
      url: '/my/article/cates'
    }).then(res => {
      //成功回调
      // console.log(res)

      if (res.data.status != 0) {
        return layui.layer.msg(res.data.message)
      }

      // 1.1.3 成功后遍历数组，动态新增
      let arr = ['<option value="">请选择文章类别</option>']
      res.data.data.forEach(ele => {
        if (ele.Id > 0) {
          arr.push(`<option value="${ele.Id}">${ele.name}</option>`)
        }
      })

      //   1.1.4 循环结束 - 渲染至表单的下拉框
      //   let str = arr.join('')
      $('[name="cate_id"]')
        .empty()
        .html(arr.join(''))

      // 1.1.5 更新渲染 - 因为有些元素是动态新增，这是form模块自动化渲染失效，需使用form.render(type, filter);方法
      // 内置模块 - 表单 - 更新渲染
      layui.form.render()

      // 1.1.6 文章分类渲染完毕,才能渲染form标签(因为文章信息中包含文章分类)
      initForm()
    })
  }

  // 2. 初始化富文本编辑器 - 富文本方法渲染至页面
  initEditor()

  // 3.文章封面图片
  // 3.1 初始化图片裁剪器
  var $image = $('#image')

  // 3.2 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }

  // 3.3 初始化裁剪区域
  $image.cropper(options)

  // 4. 文章发布
  // 4.1 定义状态
  let state = ''
  $('#btn1').on('click', function () {
    state = '已发布'
  })
  $('#btn2').on('click', function () {
    state = '草稿'
  })

  // 4.2 选择图片，渲染图片
  // 4.2.1 绑定选择封面按钮的点击事件
  $('#chooseImageBtn').on('click', function () {
    $('#chooseImageInp').click()
  })

  // 4.2.2 绑定上传文件的change事件
  $('#chooseImageInp').on('change', function (e) {
    //   cropper插件内容
    // 4.2.2.1 拿到用户选择的文件
    var file = e.target.files[0]

    // 4.2.2.2 非空校验 - 如果file等于undefined结束事件
    if (!file) return

    // 4.2.2.3 根据选择的文件，创建一个对应的 URL 地址：
    var newImgURL = URL.createObjectURL(file)

    // 4.2.2.4 先`销毁`旧的裁剪区域，再`重新设置图片路径`，之后再`创建新的裁剪区域`：
    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', newImgURL) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
  })

  // 4.3 绑定事件 - 文章修改
  $('#formEdit').on('submit', function (e) {
    // 4.3.1 阻止表单默认行为
    e.preventDefault()

    // 4.3.3 生成FormData对象
    let fd = new FormData(this)
    // 4.3.4 添加状态字段 - 把文章状态添加到FormData对象中
    //      前面的带引号做 属性 ， 后面的不带引号，用的是变量值
    fd.append('state', state)

    // 4.3.5 生成文章封面 - 生成图片是异步操作
    //  所以结果要写在回调函数里面操作
    //  ajax也要写在回调函数里面,等图片生成完毕再发送ajax
    $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function (blob) {
        // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        fd.append('cover_img', blob) //异步操作 - 一定要写在回调函数里
        // console.log(...fd)

        // 4.3.6 发送ajax - (两种方法: 1.jQuery中的ajax   2.axios)
        //      一定要写在回调函数里
        axios({
          method: 'post',
          url: '/my/article/edit',
          // 请求体（FormData 格式）
          data: fd
        }).then(res => {
          //成功回调
          // console.log(res)

          if (res.data.status != 0) {
            return layui.layer.msg(res.data.message)
          }

          // 4.3.7 成功提示
          layui.layer.msg('恭喜您，修改文章成功！')

          // 4.3.8 成功后跳转文章列表
          setTimeout(function () {
            window.parent.document.querySelector('#art-list').click()
          }, 1000)
        })
      })
  })
})
